﻿@model Model.Question
@{
    ViewBag.Title = "ueditor demo";
}
@section scripts{
    <!-- 配置文件 -->
    <script type="text/javascript" src="~/Content/ueditor/ueditor.config.js" charset="utf-8"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="~/Content/ueditor/ueditor.all.min.js" charset="utf-8"></script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" src="~/Content/ueditor/lang/zh-cn/zh-cn.js" charset="utf-8"></script>
    <script type="text/javascript">

        //实例化编辑器
        //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
        var ue = UE.getEditor('editor');
        $(document).ready(function () {
            enableBtn();
            UE.getEditor('editor');
            UE.getEditor('editor').setShow();
        });
        //插入给定的内容
        function insertHtml() {
            var value = prompt('插入html代码', '');
            UE.getEditor('editor').execCommand('insertHtml', value);
        }
        //获得内容
        function getContent() {
            //var arr = [];
            //arr.push("使用editor.getContent()方法可以获得编辑器的内容");
            //arr.push("内容为：");
            //arr.push(UE.getEditor('editor').getContent());
            //alert(arr.join("\n"));
            $("#textContent").val(UE.getEditor("editor").getContent());
            debugger;
            
            var tmp = $("#textContent").val();
            if (tmp) {
                return true;
            } else {
                return false;
            }
            
        }
        //写入内容
        function setContent(isAppendTo) {
            var arr = [];
            arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
            UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
            alert(arr.join("\n"));
        }
        //不可编辑
        function setDisabled() {
            UE.getEditor('editor').setDisabled('fullscreen');
            disableBtn("enable");
        }
        //可以编辑
        function setEnabled() {
            UE.getEditor('editor').setEnabled();
            enableBtn();
        }
        //判断是否有内容
        function hasContent() {
            var arr = [];
            arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
            arr.push("判断结果为：");
            arr.push(UE.getEditor('editor').hasContents());
            alert(arr.join("\n"));
        }

        function disableBtn(str) {
            var div = document.getElementById('btns');
            var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
            for (var i = 0, btn; btn = btns[i++];) {
                if (btn.id == str) {
                    UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
                } else {
                    btn.setAttribute("disabled", "true");
                }
            }
        }
        function enableBtn() {
            var div = document.getElementById('btns');
            var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
            for (var i = 0, btn; btn = btns[i++];) {
                UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
            }
        }

    </script>
}


<div>
    <h1>完整demo</h1>
    <form action="@Url.Action("SaveQuestion","Home")" id="form1" name="form1" method="post" onsubmit="getContent()">

        <div class="form-group">
            <label>内容</label>
            <!-- 加载编辑器的容器 -->
            <script id="editor" type="text/plain" style="width: 1024px; height: 500px;">
                这里写你的初始化内容
            </script>
            <input type="hidden" id="textContent" name="textContent"  value="@Model.textContent"/>
        </div>
        <div class="form-group">
            <label >Answer</label>
            <input type="text" class="form-control" id="Answer" name="Answer" value="@Model.Answer">
        </div>
        <div class="form-group">
            <label >QuestionType</label>
            <select class="form-control" name="qtype" id="qtype">
                <option value="1">选择题</option>
                <option value="2">填空题</option>
                <option value="3">判断题</option>
                <option value="4">简答题</option>
                <option value="5">问答题</option>
                <option value="6">计算题</option>
            </select>
        </div>
        <button type="submit" class="btn btn-default">保存</button>
    </form>
</div>
<div id="btns">
    <div>
        @*<button onclick="getContent()">保存</button>*@
        @*<button onclick="setContent()">写入内容</button>
            <button onclick="setContent(true)">追加内容</button>
            <button onclick="hasContent()">判断是否有内容</button>*@

    </div>
    @*<div>
            <button onclick="insertHtml()">插入给定的内容</button>
            <button id="enable" onclick="setEnabled()">可以编辑</button>
            <button onclick="setDisabled()">不可编辑</button>
            <button onclick="UE.getEditor('editor').setHeight(300)">设置高度为300默认关闭了自动长高</button>
        </div>*@

</div>
<!-- 实例化编辑器 -->
